<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<HTML>

<TITLE>SugarCRM SQL Editor</TITLE>
<META charset="utf-8"/>


<HEAD>

<link rel="stylesheet" href="../../skins/plugins/sql/codemirror/lib/codemirror.css"/>
<link rel="stylesheet" href="../../skins/plugins/sql/codemirror/addon/hint/show-hint.css"/>
<link rel="stylesheet" href="../../skins/plugins/sql/datatables/css/jquery.dataTables.min.css"/>
<link rel="stylesheet" href="../../skins/plugins/sql/datatables/extensions/buttons/buttons.dataTables.min.css"/>

<link href="../../skins/plugins/font-awesome/font-awesome.css?v=4.4.0" rel="stylesheet">
<link href="../../skins/plugins/animate.css" rel="stylesheet">

<link rel="stylesheet" href="../../skins/plugins/layui/css/layui.css">
   <link rel="shortcut icon" href="../../skins/product/img/logo.png">


<style>
.CodeMirror {
    width: 100%;
    /*border: 1px solid black;*/
}
div::-webkit-scrollbar-track {
   background-color: #F5F5F5;
}

div::-webkit-scrollbar {
   width: 6px;
   background-color: #F5F5F5;
}

div::-webkit-scrollbar-thumb {
   background-color: #999;
}
.layui-table[lay-data] {
   display: block !important;
}
</style>
    
</HEAD>


<BODY>

<div class="layui-row layui-col-space5" style="min-height: 406px">
   <div class="layui-col-sm6 layui-col-md9">

      <div class="layui-card no-space" style="margin: 0px;">
         <div class="layui-card-header">
            新增任务
            <div class="layui-btn-group" style="float: right">
               <button type="button" class="layui-btn layui-btn-primary layui-btn-sm" onclick="run_sql()"><i class="fa fa-play"></i></button>
               <button type="button" class="layui-btn layui-btn-primary layui-btn-sm"><i class="fa fa-pause"></i></button>
               <button type="button" class="layui-btn layui-btn-primary layui-btn-sm"><i class="fa fa-save"></i></button>
               <button type="button" class="layui-btn layui-btn-primary layui-btn-sm"><i class="fa fa-trash"></i></button>
               <button type="button" class="layui-btn layui-btn-primary layui-btn-sm" id="toggleSQL" onclick="toggleSQL()"><i class="fa fa-angle-double-up"></i></button>
            </div>
         </div>
         <div class="layui-card-body" style="padding: 0px;">
            <form id="sql-form">
               <textarea id="code" name="code" >
-- show tables;
-- DESCRIBE -tableName-;
select a.access,b.data from cdn_access_statistic a ,cdn_access_data b where a.access = b.access;


               </textarea>
            </form>
         </div>
      </div>


      <div class="layui-card" style="margin-top: 5px;">
         <div class="layui-card-body" style="padding: 0px;">
            <div class="layui-tab" style="height: 400px">
               <ul class="layui-tab-title">
                  <li class="layui-this">运行结果</li>
                  <li>运行日志</li>
                  <li>运行历史</li>

                  <div class="layui-btn-group" style="float: right;padding: 5px;">
                     <button type="button" style="float: right;" class="layui-btn layui-btn-sm" data-type="isAll">导出</button>
                  </div>
               </ul>
               <div class="layui-tab-content" style="padding: 0px;">
                  <div class="layui-tab-item " id="data-container" style="text-align: center"><table id="demo" lay-filter="userFilter" ></table></div>
                  <div class="layui-tab-item layui-show" id="data-error" style="text-align: center">暂无数据，请先运行任务!</div>
                  <div class="layui-tab-item" style="text-align: center">暂无数据，请先运行任务!</div>
               </div>
            </div>
         </div>
      </div>
   </div>
   <div class="layui-col-sm6 layui-col-md3">
      <div class="layui-card no-space" style="margin: 0px;">
         <div class="layui-card-header">数据资源</div>
         <div class="layui-card-body" style="padding: 0px 15px;">
            <form class="layui-form" action="">
               <select name="modules" lay-verify="required" lay-search="">
                  <option value="">请选择数据源</option>
                  <option value="1">10.106.1.190-原始库</option>
                  <option value="2">资源库</option>
                  <option value="3">主题库</option>
               </select>
               <input type="text" name="title" lay-verify="title" autocomplete="off" placeholder="请输入数据资源名称查询" class="layui-input" >
            </form>
            <div id="dataTree" style="height: 638px;overflow-y: scroll;-webkit-scrollbar-thumb:"></div>
         </div>
      </div>

   </div>
</div>

<script src="../../skins/plugins/sql/js/jszip.min.js"></script>
<script src="../../skins/plugins/sql/codemirror/lib/codemirror.js"></script>
<script src="../../skins/plugins/sql/codemirror/addon/hint/show-hint.js"></script>
<script src="../../skins/plugins/sql/codemirror/addon/hint/sql-hint.js"></script>
<script src="../../skins/plugins/sql/codemirror/mode/sql/sql.js"></script>

<script src="../../skins/plugins/sql/js/jquery-2.2.0.min.js"></script>
<script src="../../skins/plugins/sql/datatables/js/jquery.dataTables.min.js"></script>
<script src="../../skins/plugins/sql/datatables/extensions/buttons/dataTables.buttons.min.js"></script>
<script src="../../skins/plugins/sql/datatables/extensions/buttons/buttons.html5.min.js"></script>
<script src="../../skins/plugins/sql/datatables/extensions/buttons/buttons.flash.min.js"></script>

<script src="../../skins/plugins/layui/layui.all.js"></script>
<script>
   layui.use(['element', 'layer'], function(){
      var element = layui.element;
      var layer = layui.layer;

      //监听折叠
      element.on('collapse(test)', function(data){
         layer.msg('展开状态：'+ data.show);
      });
   });
   layui.use('tree', function(){
      var data = [
         {
            title:"公安执法与执勤数据",spread: true
            ,children: [
               {title:"国内安全保卫"},
               {title:"经济侦查犯罪"},
               {
                  title:"治安管理",spread: true
                  ,children:[
                     {
                        title:"人口管理信息系统",spread: true

                     }
                  ]
               },
               {title:"刑事侦查"},
               {title:"出入境管理"},
               {title:"铁道公安局"},
               {title:"网络安全保卫"},
               {title:"技术侦查"},
               {title:"交通管理"},
               {title:"法制"},
               {title:"国际合作"},
               {title:"装备财务"},
               {title:"禁毒"},
               {title:"科信"},
               {title:"情报信息"},
               {title:"警务保障"},
               {title:"反邪教"},
               {title:"反恐"},
               {title:"情报中心"},
               {title:"办公厅（室）"},
               {title:"纪委督察"},
               {title:"刑事侦查"},
               {title:"出入境管理"},
               {title:"铁道公安局"},
               {title:"网络安全保卫"},
               {title:"技术侦查"},
               {title:"交通管理"},
               {title:"法制"},
               {title:"国际合作"},
               {title:"装备财务"},
               {title:"禁毒"},
               {title:"科信"},
               {title:"情报信息"},
               {title:"警务保障"},
               {title:"反邪教"},
               {title:"反恐"},
               {title:"情报中心"},
               {title:"办公厅（室）"},
               {title:"纪委督察"}
            ]
         },
         {title:"互联网数据"},
         {title:"电信数据"},
         {title:"物联网数据"},
         {title:"视频数据"},
         {title:"行业数据"},
         {title:"其他数据"}
      ];
      var tree = layui.tree;
      tree.render({
         elem: '#dataTree'
         ,data: data
         ,accordion: true
         ,click: function(obj){

         }
      });
   });
var AUTOCOMPLETE_TABLES = {
    'hello': ['world', 'neighbor', 'there'],
    'reply': ['rumble', 'hellodley', 'hi_there']
}

function fake_post(url, data, callback){
    // This structure is not specific to DataTable and is just the structure my server is returning.
    var response = {
        'type': 'table',
        'header': ['id', 'name'],
        'columns': [{'title': 'ID'}, {'title': 'Name'}],
        'data': [
            ['1', 'Homer Simpson'],
            ['2', 'Bart Simpson'],
            ['3', 'Lisa Simpson'],
            ['4', 'Ned Flanders'],
            ['5', 'Planet Earth']
        ]
    }

    callback(response);
}
function toggleSQL(){
   $("#sql-form").toggle();
   var dom = document.getElementById("toggleSQL");
   $(dom).children("i").css("fa fa-angle-double-down");
   if($(dom).children("i").hasClass("fa-angle-double-down")){

      $(dom).children("i").removeClass("fa-angle-double-down").addClass("fa fa-angle-double-up");
   }else {
      $(dom).children("i").removeClass("fa-angle-double-up").addClass("fa fa-angle-double-down");
   }
}

   function run_sql(){
       $('#data-container').show();
       $('#data-error').removeClass("layui-show");
       var sql = window.editor.getValue();
       layui.use('table', function(){
           var table = layui.table;
           table.render({
               elem: '#demo'
               ,url: '/sql/runSql'
               ,where:{sql:sql}
               ,method:'post'
               ,page: true //开启分页
               ,cellMinWidth: 100 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
               ,height: 500
               ,cols: [[
                   { type:'numbers',align:'center', width:60,title:'序号'}
                   ,{field:'access',  title: '字段名称',align:'center',width:'18%'}
               ]],
               done:function (res,page,count) {
                   var myData=new Array();
                   myData = res.data.columndata;
                   table.init('userFilter',{//转换成静态表格
                       cols:[myData]
                       ,data:res.data.data
                       ,limit:10
                   });
                   fake_post("editor/run-sql", {'data': sql}, function(result){
                       // $("#data-container").html(htmlinfo);
                       toggleSQL();
                   });
               }
           });
       });
   }

window.onload = function() {

    window.editor = CodeMirror.fromTextArea(document.getElementById('code'), {
        mode: 'text/x-mysql',
        indentWithTabs: true,
        smartIndent: true,
        lineNumbers: true,
        matchBrackets : true,
        autofocus: true,
        extraKeys: {"Ctrl-Space": "autocomplete"}
    });

    window.editor.setSize('auto','auto');
  CodeMirror.commands.autocomplete = function(cm) {
    CodeMirror.showHint(cm, CodeMirror.hint.sql, {
        tables: AUTOCOMPLETE_TABLES
    });
  }
};
</script>



</BODY>
</HTML>
